<style lang="less" scoped>
@import "../assets/css/config.less";
.xuanxiang{
  display: flex;
  flex-direction: column;
  justify-content: start;
}

.xuanxiang span{
  font-size: 14px;
}
.button{
  line-height: 32px;
  background-color: @color1;
  color: @white;
  border-radius: 4px;
  font-size: 13px;
  width: 60px;
  margin: 10px 0px;
  letter-spacing: 2px;
  outline: none;
  border: none;
  cursor: pointer;
}
.button:hover{
  background-color: @color2;
}
.button:active{
  background-color: @color3;
}
</style>

<template>
  <div>
    <CheckboxGroup
      class="xuanxiang"
      :key="toString(Math.random())"
      v-model="answer_value"
    >
      <Checkbox
        v-for="(item, index) in items.items"
        :label="index + 1 + ''"
        :key="index"
        :disabled="done"
      >
        <span style="margin-left: 5px"> {{ formatABC(index) }}</span>
        <span>{{item}}</span>
      </Checkbox>
    </CheckboxGroup>

    <button 
      class="button"
      @click="submitAnswer"
      :disabled="done"
    >提交</button>
    <div v-if="done">
      <el-button
        type="success"
        icon="el-icon-check"
        circle
        size="mini"
        v-if="result"
        class="right_no"
      ></el-button>
      <el-button
        type="danger"
        icon="el-icon-close"
        circle
        size="mini"
        v-if="!result"
        class="right_no"
      ></el-button>
      <div>
        <span style="font-weight:600">正确答案：</span>
        <span v-for="ans in items.answer" :key="ans">{{ formatABC(parseInt(ans)-1) }}</span>
      </div>
      <span style="font-weight:600">解析：</span>
      <span v-html="items.illustrationContent"></span>
    </div>
  </div>
</template>

<script>
import { getQuestionAnswer, add_record } from  "../api/api";
export default {
  name: 'myradio',
  data(){
    return{
      answer_value: [],
      done: false,
      items: {},
      result: false
      // showFlag: false
    }
  },
  props: ['point', 'ques', 'attachment'],
  mounted() {
    this.items = this.ques;
    this.user = JSON.parse(this.$store.state.user);
  },
  methods: {
    formatABC(index){
      let str = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
      return str[index];
    },
    TrueOrFalse(value1, value2) {
      if(value1.length !== value2.length) return false;
      for(let i=0; i <value1.length; i++){
        if(value1[i] !== value2[i]) return false;
      }
      return true;
    },
    submitAnswer() {
      if(this.answer_value.length===0){
        this.$Message.error('请先选择你的答案');
        return
      }
      if(this.done) {
        this.$Message.error('不可重复提交答案');
        return
      }
      if(this.attachment){
        this.items = this.point.practice;
        this.done = true
        this.result = this.TrueOrFalse(this.answer_value, this.items.answer)
        let json = {
          menu: this.point.menu,
          seq: this.point.seq,
          point_ID: this.point._id,
          attachment: true,
          question_ID: "",
          UUID: this.user.UUID,
          stu_answer: this.answer_value,
          result: this.result,
          // updateProcess: this.flag,
          time: +new Date()
        };
        this.addErrRecord(json);
        return
      }
      getQuestionAnswer({
        id: this.items._id
      }).then((res) => {
        if(res.state === true) {
          this.items.answer = res.answer;
          this.items.illustrationContent = res.illustrationContent;
          this.result = this.TrueOrFalse(this.answer_value, res.answer);
          this.done = true;
          let json = {
            menu: this.point.menu,
            seq: this.point.seq,
            point_ID: this.point._id,
            attachment: false,
            question_ID: this.items._id,
            UUID: this.user.UUID,
            stu_answer: this.answer_value,
            result: this.result,
            // updateProcess: this.flag,
            time: +new Date()
          };
          this.addErrRecord(json);
        } else {
          this.$Message.error('提交答案失败');
        }
      }).catch(err => {
        this.$Message.error(err);
      })
    },
    addErrRecord(json){
      add_record(json)
      .then(response => {
        if (response.state === true) {
          // this.show = true;
        } else {
          this.$Message.error(response.msg);
        }
        //获取正确率
        // let question_ID = "";
        // if (this.question_list.length !== 0) {
        //   question_ID = this.point.question_ID;
        // }
        // return getSingleRecord({
        //   flags: this.user.flags,
        //   question_ID: question_ID,
        //   point_ID: this.point._id
        // });
      })
      // .then(response => {
      //   if (response.state === true) {
      //     this.correctRate = parseFloat(response.right_rate.toFixed(2));
      //   } else {
      //     this.$Message.error(response.msg);
      //   }
      // })
      // .catch(error => {
      //   this.$Message.error(error.status);
      // });
    }
  }
}
</script>